<template>
  <div class="SideBar">
    <!-- #545c64  #001529-->
    <el-menu :default-active="menuIdx" class="el-menu-vertical-demo" @select="changeMenu" background-color="#001529" text-color="hsla(0,0%,100%,.65)" :collapse="isCollapse">
      <div style="width: 100%;height:50px;display:flex;align-items:center;justify-content: center;">
        <span slot="title" style="padding-left: 10px;font-size:16px;color:#fff;font-weight:bold;">MES-SYSTEM</span>
      </div>
      <el-menu-item index="1">
        <i class="el-icon-tickets"></i>
        <span slot="title">采购订单</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-tickets"></i>
        <span slot="title">采购按期交货率</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-tickets"></i>
        <span slot="title">退料通知单</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-tickets"></i>
        <span slot="title">备货单</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-tickets"></i>
        <span slot="title">采购交货合格率</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-tickets"></i>
        <span slot="title">质量维修扣款</span>
      </el-menu-item>
      <el-menu-item index="7">
        <i class="el-icon-tickets"></i>
        <span slot="title">退货库存</span>
      </el-menu-item>
      <el-menu-item index="8">
        <i class="el-icon-tickets"></i>
        <span slot="title">送货通知单</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'SideBar',
  props: ['isCollapse'],
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      menuIdx: state => state.menuIdx
    })
  },
  methods: {
    ...mapActions([
      'changeMenuIdx',
      'changeModuleIdx'
    ]),
    changeMenu (index, keyPath) {
      this.changeModuleIdx(keyPath[0])
      this.changeMenuIdx(index)
    }
  }
}
</script>

<style lang="less" scoped>
.SideBar{
  height: 100%;
  .el-menu-item{
    text-align: left;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>
